<template>
  <el-button :type="type" :autofocus="autofocus" :size="size" :circle="circle" :loading="loading" :icon="icon"
             :native-type="nativeType" :disabled="disabled" :plain="plain" :round="round" :style="style">
    <slot></slot>
  </el-button>
</template>
<script>
  import view from './view.js'
  import text from './text.js'

  export default {
    name: 'v-button',
    componentName: 'v-button',
    mixins: [view, text],
    props: {
      desc: {
        type: String,
        default: 'v-button'
      },
      disabledColor: String,
      type: {
        type: String,
        default: 'default'
      },
      icon: {
        type: String,
        default: ''
      },
      nativeType: {
        type: String,
        default: 'button'
      },
      loading: Boolean,
      disabled: Boolean,
      plain: Boolean,
      autofocus: Boolean,
      round: Boolean,
      circle: Boolean
    },
    install: function (Vue) {
      Vue.component('v-button', this)

    },
    computed: {
      style () {
        text.addAttr('disabled', 'cursor')
        let prop = view.getStyle(this.$props)
        let textProp = text.getTextStyle(this.$props, (val, attrName) => {
          if (attrs[attrName]) {
            switch (attrName) {
              case 'color':
                val = this.$props.disabled ? this.$props.disabledColor : val
                break
              case 'disabled':
                val = this.$props.disabled ? 'not-allowed' : ''
                break
            }
            attrName = attrs[attrName]
          } else {
            // 没有注册的属性直接 过滤
            return ''

          }
          return {
            attrName,
            val
          }
        })
        console.log(prop + textProp)
        return prop + textProp
      }

    }
  }

</script>
